<template>
  <div>
      <!-- 搜索框 -->
      <el-form :inline="true" :model="employeeSearch" class="demo-form-inline">

          <el-form-item label="员工账号">
              <el-input v-model="employeeSearch.account" placeholder="员工账号" clearable />
          </el-form-item>

          <el-form-item label="员工昵称">
              <el-input v-model="employeeSearch.nickname" placeholder="员工昵称" clearable />
          </el-form-item>

          <el-form-item label="手机号">
              <el-input v-model="employeeSearch.telephone" placeholder="手机号" clearable />
          </el-form-item>

          <el-form-item>
              <el-button type="primary" @click="getEmployeePage()">搜索</el-button>
              <el-button @click="openDialog()">添加员工</el-button>
          </el-form-item>

          <el-divider />

    <!-- table表格 -->
    <el-table :data="employeeList" stripe style="width: 100%">
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column prop="account" label="账号"  />
      <el-table-column prop="nickname" label="昵称"  />
      <el-table-column prop="telephone" label="手机号" />
      <el-table-column prop="role" label="角色" />
      <el-table-column prop="is_del" label="状态" >
        <template #default="scope">
          {{scope.row.is_del == 0 ? '正常' : '禁用'}}
        </template>

      </el-table-column >
      <el-table-column  label="操作"  style="align-items: center;">
        <template #default="scope">

          <el-button size="small" type="primary" @click="openchange(scope.row)">
            修改
          </el-button>
          <el-button
            size="small"
            :type="getButtonType(scope.row)"
            @click="changestate(scope.row)"
          >
            {{ scope.row.is_del == 0 ? '禁用' : '启用' }}
          </el-button>

          <el-button
            size="small"
            type="danger"
            @click="deleteMan(scope.row)"
          >
           开除 
          </el-button>

        </template>
      </el-table-column>
    </el-table>
          <el-divider />

          <!-- 分页 -->
          <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[2, 5, 10, 15]"
              :background="background" layout="total, sizes, prev, pager, next, jumper" :total="total"
              @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </el-form>

      <!-- 新增或修改的对话框 -->

      <el-dialog v-model="dialogFormVisible" :title="titieNew" width="500">
    <el-form :model="form">
      <el-form-item label="员工账号">
        <el-input v-model="employee.account" autocomplete="off" />
      </el-form-item>
      <el-form-item label="员工昵称">
        <el-input v-model="employee.nickname" autocomplete="off" />
      </el-form-item>
      <el-form-item label="员工电话">
        <el-input v-model="employee.telephone" autocomplete="off" />
      </el-form-item>


    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="saveOrUpateEmployee()">
         提交
        </el-button>
      </div>
    </template>
  </el-dialog>


  </div>
</template>

<script>
import { ElMessage,ElMessageBox } from 'element-plus';
// import axios from 'axios';
// import qs from 'qs';
import employeeApi from '@/api/employee.js'

export default {
  inject:['reload'],  
  data() {
      return {
          employeeSearch: {},
          employeeList: [],
          currentPage: 5,
          pageSize: 10,
          total:0,
          employee:{},
          titieNew:'添加员工',
          dialogFormVisible:false
      }
  },
  methods: {
    getButtonType(row) {
      return row.is_del === 0 ? 'warning' : 'primary';
    },
    changestate(row){
        ElMessageBox.confirm(
    '您确定要修改员工状态吗?',
    '温馨提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      employeeApi.updateEmployeeStatus({
              id:row.id,
              is_del:row.is_del == 0 ? 1 : 0
            }).then(res=>{
              console.log(res)
                ElMessage.success(res.msg);
                  // 重新查询
                  this.getEmployeePage();
              })
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '取消改变用户状态的操作',
            })
          })
        
    },

    deleteMan(row){
        ElMessageBox.confirm(
   '您确定要开除改员工吗?',
    '警示！',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
       employeeApi.deleteEmployee(row.id).then(res=>{
      ElMessage.success(res.msg)
       this.dialogFormVisible=false;
       this.getEmployeePage;
        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消开除员工',
      })
    })
        
    },
    openDialog(){
        this.titieNew="添加员工"
        this.dialogFormVisible=true;
        this.employee={}
    },
    openchange(row){
        this.titieNew="修改员工"
        this.dialogFormVisible=true;
        //深拷贝
        this.employee=JSON.parse(JSON.stringify(row));
    },
    saveOrUpateEmployee(){
        if(this.employee.id==undefined){
            this.saveEmployee()
        }else{
            this.updateEmployee()
        }
    },
    saveEmployee(){
        employeeApi.addEmployee(this.employee).then(res=>{
ElMessage.success(res.msg)
this.dialogFormVisible=false;
this.getEmployeePage;
        })
    },
    updateEmployee(){
       employeeApi.updateEmployee(this.employee).then(res=>{
ElMessage.success(res.msg)
this.dialogFormVisible=false;
this.getEmployeePage;
        })
    },
    handleSizeChange(val){        this.pageSize = val;
        //重新发起分页查询
        this.getEmployeePage();
      },
      handleCurrentChange(val){
        this.page = val;
        //重新发起分页查询
        this.getEmployeePage();
      },
      getEmployeePage() {
        const date = {
        page: this.currentPage,
        pageSize: this.pageSize,
        account: this.employeeSearch.account,
        nickname: this.employeeSearch.nickname,
       telephone: this.employeeSearch.telephone,
        // role: this.employeeSearch.role,
        // is_status: this.employeeSearch.is_status,
    };

    employeeApi.getEmployeeList(date).then(res => {
    //   this.employeeList = res.data.data
        this.employeeList = res.date.list;
        this.total=res.date.total;
    })
      },


  },
  created() {
    this.getEmployeePage();
  },

}
</script>

<style scoped></style>